<template>
	<view class="yhcard">
		<view class="syspadding navbar">
			<view class="navbarh acea-row row-between-wrapper">
				<view class="acea-row row-middle backbtn" @click="back">
					<image class="back" src="../../static/images/back.png" mode="aspectFit"></image>
					<text style="margin-left: -10rpx;">返回</text>
				</view>
				<view class="fs-34">银行卡</view>
				<view class="backbtn"></view>
			</view>
		</view>
		<view style="width: 100%;height: 170rpx;"></view>
		
		<view class="list">
			<view class="item acea-row row-middle" v-for="(item,index) in list" :key="index">
				<view class="pic">
					<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240115/dd620b4f69acd0d4e97e2748f8f9c03c.jpg" mode=""></image>
				</view>
				<view class="text">
					<view class="name">{{ item.bankName }}</view>
					<view class="code">{{ item.bankNumber }}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 160rpx;"></view>
		<view class="footer acea-row row-middle row-center">
			<view class="add acea-row row-middle row-center">添加</view>
		</view>
	</view>
</template>

<script>
	import{
		bankcardList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				cards:'6224841831387112',
				list:[],
				
			};
		},
		filters:{
			code(str){
				var reg = /^\d{12}(\d{4})$/;
				return str.replace(reg, "**** **** **** $1");
				// console.log(typeof(str))
				// let len = str.length-4;
				// let xing = '';
				// for(var i=0;i<len;i++) {
				// 	xing+='*';
				// }
				// return xing+str.substring(str.length-5,str.length-1);
			},
		},
		onShow() {
			this.getlist();
		},
		methods:{
			getlist(){
				let that = this;
				bankcardList({ 
					page:1, limit: 999
				}).then(res=>{
					that.list = res.data.data;
				})
			},
			back(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.yhcard{
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background-color: #ffffff;
			border-bottom: 1rpx solid #E6E6E6;
			
			.navbarh{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.backbtn{
					color: #5186E6;
					width: 150rpx;
				}
				.back{
					width: 60rpx;
					height: 60rpx;
					margin-left: -20rpx;
				}
			}
		}
		
		.list{
			padding: 30rpx;
			
			.item{
				background-color: #ffffff;
				border-radius: 15rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.pic{
					width: 100rpx;
					height: 100rpx;
				}
				
				.text{
					margin-left: 50rpx;
					font-size: 30rpx;
					
					.name{
						color: #383838;
						font-size: 32rpx;
						letter-spacing: 4rpx;
					}
					.code{
						font-size: 30rpx;
						color: #383838;
						margin-top: 5rpx;
					}
				}
			}
			
		}
		
		.footer{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 30rpx;
			background-color: #ffffff;
			
			.add{
				width: 650rpx;
				height: 88rpx;
				background-color: #5781F0;
				color: #ffffff;
				font-size: 32rpx;
				border-radius: 8rpx;
			}
		}
		
	}
</style>
